<template>
  <el-header>
    <div class="header-title">
      <div class='menu-icon'>
        <el-icon size="40px" color="#fff"><Menu /></el-icon>
<!--        @click="collapseChage"-->
      </div>
      <span class="title">小区物业管理系统</span>
    </div>
    <div class="header-info">
      <div class="userinfo">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            欢迎，{{user.type=='管理员'? '管理员':user.username+"住户"}}
            <el-icon class="el-icon--right">
              <CaretBottom />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleQuit">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-header>
</template>

<script>
import { useStore} from 'vuex'
import {onMounted,ref} from 'vue'
import {useRouter} from 'vue-router'
import {ElLoading} from "element-plus";
export default {
  name:'Header',
  setup(){
    const store=useStore()
    const user=ref({})
    const router=useRouter()

    //退出事件
    function handleQuit(){
      startLoading()
      setTimeout(()=>{
        endLoading()
        sessionStorage.removeItem("user")
        router.push({name:"login"})
      },1000)
    }
    //加载中弹窗相关
    let loadingInstance ; //定义loading变量
    function startLoading() {
      //加载中效果
      loadingInstance  = ElLoading.service({
        lock: true,
        text: "加载中...",
        // background: "rgba(0, 0, 0, 0.7)"
        background:"#7C9ADC7F"
      });
    }
    function endLoading() {
      //关闭加载中效果
      loadingInstance .close();
    }
    //挂载获取session数据
    onMounted(()=>{
      user.value=JSON.parse(sessionStorage.getItem("user"))
    })

    return{
      store,
      user,
      handleQuit,
      startLoading,
      endLoading
    }
  }
}
</script>
<style scoped>
  .el-header{
    width: 100%;
    height: 100%;
    background-color: #324057;
    color: var(--el-text-color-primary);
    text-align: center;
    padding: 0;
    border-bottom: 1px solid #1f2d3d;
    display: flex;
  }
  .header-title{
    flex: 5;
    height: 100%;
    display: flex;
  }
  .menu-icon{
    height: 3em;
    width: 3em;
    margin-top: 15px;
    margin-left: 20px;
  }
  .header-title .title{
    height: 100%;
    margin-top: 21px;
    margin-left: 5px;
    font-size: 20px;
    color: #fff;
  }
  .header-info{
    flex: 8;
    height:100%;
  }
  .userinfo{
    width: 120px;
    height: 100%;
    display: flex;
    float: right;
  }
  .el-dropdown{
    margin-top: 28px;
    color: #ffffff;
  }
</style>
